<template>
  <div class="city-info-container">
    <!-- 城市选择器 -->
    <div class="city-selector">
      <label for="city-select">选择城市：</label>
      <select
        id="city-select"
        v-model="selectedCityId"
        @change="handleCityChange"
      >
        <option value="">-- 请选择城市 --</option>
        <option v-for="city in cities" :key="city.id" :value="city.id">
          {{ city.name }} ({{ city.country }})
        </option>
      </select>
    </div>

    <!-- 城市详情 -->
    <div v-if="selectedCity" class="city-details">
      <!-- 城市头部横幅 -->
      <div class="city-header">
        <div class="city-banner">
          <img
            :src="selectedCity.bannerUrl"
            :alt="selectedCity.name + ' 城市风光'"
            class="banner-img"
          >
          <div class="banner-overlay"></div>
          <div class="banner-content">
            <h1>{{ selectedCity.name }}</h1>
            <p>{{ selectedCity.country }} · {{ selectedCity.region }}</p>
          </div>
        </div>

        <!-- 城市基本信息卡片 -->
        <div class="city-stats">
          <div class="stat-card">
            <i class="fas fa-users"></i>
            <div class="stat-info">
              <p>人口</p>
              <h3>{{ selectedCity.population }}</h3>
            </div>
          </div>
          <div class="stat-card">
            <i class="fas fa-map-marker-alt"></i>
            <div class="stat-info">
              <p>面积</p>
              <h3>{{ selectedCity.area }}</h3>
            </div>
          </div>
          <div class="stat-card">
            <i class="fas fa-sun"></i>
            <div class="stat-info">
              <p>气候</p>
              <h3>{{ selectedCity.climate }}</h3>
            </div>
          </div>
          <div class="stat-card">
            <i class="fas fa-language"></i>
            <div class="stat-info">
              <p>语言</p>
              <h3>{{ selectedCity.language }}</h3>
            </div>
          </div>
        </div>
      </div>

      <!-- 城市介绍和图片 -->
      <div class="city-content">
        <div class="city-description">
          <h2>关于 {{ selectedCity.name }}</h2>
          <p>{{ selectedCity.description }}</p>

          <h3>历史背景</h3>
          <p>{{ selectedCity.history }}</p>

          <h3>文化特色</h3>
          <p>{{ selectedCity.culture }}</p>
        </div>

        <div class="city-gallery">
          <h3>城市风光</h3>
          <div class="gallery-grid">
            <img
              v-for="(img, index) in selectedCity.gallery"
              :key="index"
              :src="img"
              :alt="selectedCity.name + ' 风光 ' + (index + 1)"
              class="gallery-img"
              loading="lazy"
            >
          </div>
        </div>
      </div>

      <!-- 著名景点 -->
      <div class="landmarks-section">
        <h2>著名景点</h2>
        <div class="landmarks-grid">
          <div
            class="landmark-card"
            v-for="(landmark, index) in selectedCity.landmarks"
            :key="index"
          >
            <img
              :src="landmark.image"
              :alt="landmark.name"
              class="landmark-img"
            >
            <div class="landmark-info">
              <h3>{{ landmark.name }}</h3>
              <p>{{ landmark.description }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 未选择城市时的提示 -->
    <div v-else class="no-selection">
      <div class="empty-state">
        <i class="fas fa-map-marked-alt fa-5x"></i>
        <h2>请选择一个城市</h2>
        <p>从上方的下拉菜单中选择一个城市，查看详细信息</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();
const selectedCityId = ref('');
const selectedCity = ref(null);

// 城市详细数据 - 扩展了更多城市
const cities = ref([
  {
    id: 1,
    name: "北京",
    country: "中国",
    region: "华北地区",
    population: "约2154万",
    area: "16,410.54平方公里",
    climate: "温带季风气候",
    language: "普通话",
    bannerUrl: "https://picsum.photos/id/1036/1920/500",
    description: "北京是中华人民共和国的首都，是全国政治、文化、国际交往和科技创新中心。作为一座有着三千多年历史的古都，北京拥有众多历史名胜古迹和丰富的文化遗产。",
    history: "北京有着3000余年的建城史和850余年的建都史，曾是辽、金、元、明、清五朝帝都。1949年10月1日，中华人民共和国成立，北京成为新中国的首都。",
    culture: "北京是中国传统文化与现代文明交相辉映的城市，京剧、相声、胡同文化等都是北京独特的文化符号。北京的饮食文化也十分丰富，烤鸭、涮羊肉等都是享誉世界的美食。",
    gallery: [
      "https://picsum.photos/id/1067/600/400",
      "https://picsum.photos/id/1055/600/400",
      "https://picsum.photos/id/1047/600/400",
      "https://picsum.photos/id/1037/600/400"
    ],
    landmarks: [
      {
        name: "故宫博物院",
        image: "https://picsum.photos/id/1059/400/300",
        description: "中国明清两代的皇家宫殿，世界上现存规模最大、保存最为完整的木质结构古建筑之一。"
      },
      {
        name: "长城",
        image: "https://picsum.photos/id/1036/400/300",
        description: "世界文化遗产，中国古代重要的军事防御工程，被誉为'世界第八大奇迹'。"
      },
      {
        name: "颐和园",
        image: "https://picsum.photos/id/1056/400/300",
        description: "保存最完整的一座皇家行宫御苑，被誉为'皇家园林博物馆'。"
      }
    ]
  },
  {
    id: 2,
    name: "上海",
    country: "中国",
    region: "华东地区",
    population: "约2487万",
    area: "6,340.5平方公里",
    climate: "亚热带季风气候",
    language: "普通话、上海话",
    bannerUrl: "https://picsum.photos/id/1031/1920/500",
    description: "上海是中国的经济、金融、贸易、航运中心，是一座国际化大都市。上海既有现代化的摩天大楼，也有历史悠久的石库门建筑，展现了传统与现代的完美融合。",
    history: "上海在19世纪中叶开埠后迅速发展成为远东重要的商业和金融中心。改革开放后，上海经济快速发展，特别是浦东新区的开发开放使上海成为中国经济发展的龙头。",
    culture: "上海文化是海派文化的发源地，融合了中国传统文化与西方文化元素。上海的戏曲、电影、文学等领域在中国具有重要影响力。",
    gallery: [
      "https://picsum.photos/id/1031/600/400",
      "https://picsum.photos/id/1048/600/400",
      "https://picsum.photos/id/1029/600/400",
      "https://picsum.photos/id/1060/600/400"
    ],
    landmarks: [
      {
        name: "外滩",
        image: "https://picsum.photos/id/1031/400/300",
        description: "上海的标志性景点，汇集了各种风格的建筑，被誉为'万国建筑博览群'。"
      },
      {
        name: "东方明珠",
        image: "https://picsum.photos/id/1048/400/300",
        description: "上海的地标性建筑，高468米，是集观光、餐饮、娱乐于一体的多功能建筑。"
      },
      {
        name: "豫园",
        image: "https://picsum.photos/id/1060/400/300",
        description: "始建于明代的古典园林，是上海著名的传统景点和文化标志。"
      }
    ]
  },
  {
    id: 3,
    name: "纽约",
    country: "美国",
    region: "东北部",
    population: "约862万",
    area: "789平方公里",
    climate: "温带大陆性气候",
    language: "英语",
    bannerUrl: "https://picsum.photos/id/1039/1920/500",
    description: "纽约是美国第一大城市及第一大港口，是世界上最大的城市之一，也是全球重要的金融、商业、媒体和文化中心。",
    history: "纽约始建于17世纪，曾是荷兰殖民地，名为新阿姆斯特丹。18世纪后期成为美国的临时首都。19世纪中叶以来，纽约逐渐发展成为世界重要的城市。",
    culture: "纽约是一座高度多元化的城市，拥有来自世界各地的移民，形成了丰富多样的文化。纽约的戏剧、音乐、艺术等领域在全球具有重要影响力。",
    gallery: [
      "https://picsum.photos/id/1039/600/400",
      "https://picsum.photos/id/1040/600/400",
      "https://picsum.photos/id/1057/600/400",
      "https://picsum.photos/id/1061/600/400"
    ],
    landmarks: [
      {
        name: "自由女神像",
        image: "https://picsum.photos/id/1039/400/300",
        description: "法国赠送给美国的礼物，是自由和民主的象征，也是纽约最著名的地标之一。"
      },
      {
        name: "时代广场",
        image: "https://picsum.photos/id/1057/400/300",
        description: "位于曼哈顿中心，以其明亮的广告牌和繁华的氛围闻名于世。"
      },
      {
        name: "中央公园",
        image: "https://picsum.photos/id/1040/400/300",
        description: "位于曼哈顿中心的大型城市公园，是纽约市民和游客休闲娱乐的重要场所。"
      }
    ]
  },
  {
    id: 4,
    name: "东京",
    country: "日本",
    region: "关东地区",
    population: "约1396万",
    area: "2,194平方公里",
    climate: "温带海洋性季风气候",
    language: "日语",
    bannerUrl: "https://picsum.photos/id/1052/1920/500",
    description: "东京是日本的首都和最大城市，是日本的政治、经济、文化和交通中心。作为世界上人口最多的大都市之一，东京以其独特的传统文化与尖端科技的融合而闻名。",
    history: "东京古称江户，1603年德川幕府建立后成为日本的政治中心。1868年明治维新后，江户改名为东京并成为日本首都。二战后，东京经历了快速重建和发展，成为国际化大都市。",
    culture: "东京是日本传统文化与现代流行文化的交汇点，既有传统的神社、寺庙和艺伎文化，也有动漫、时尚等现代流行文化。东京的美食文化也十分发达，寿司、拉面等享誉世界。",
    gallery: [
      "https://picsum.photos/id/1052/600/400",
      "https://picsum.photos/id/1053/600/400",
      "https://picsum.photos/id/1054/600/400",
      "https://picsum.photos/id/1055/600/400"
    ],
    landmarks: [
      {
        name: "东京塔",
        image: "https://picsum.photos/id/1052/400/300",
        description: "东京的标志性建筑，建于1958年，模仿巴黎埃菲尔铁塔设计，是东京重要的观光景点。"
      },
      {
        name: "浅草寺",
        image: "https://picsum.photos/id/1053/400/300",
        description: "东京最古老的寺庙，建于628年，是东京重要的文化和旅游景点。"
      },
      {
        name: "涩谷十字路口",
        image: "https://picsum.photos/id/1054/400/300",
        description: "世界上最繁忙的十字路口之一，每天有超过50万人通过，是东京现代都市生活的象征。"
      }
    ]
  },
  {
    id: 5,
    name: "伦敦",
    country: "英国",
    region: "英格兰东南部",
    population: "约890万",
    area: "1,572平方公里",
    climate: "温带海洋性气候",
    language: "英语",
    bannerUrl: "https://picsum.photos/id/1061/1920/500",
    description: "伦敦是英国的首都和最大城市，是英国的政治、经济、文化和金融中心。作为一座拥有两千年历史的城市，伦敦融合了古老的历史遗迹和现代的城市景观。",
    history: "伦敦由罗马人建立于公元43年，当时称为 Londinium。在中世纪成为英格兰的首都，经历了工业革命和两次世界大战的洗礼。战后伦敦重建并发展成为国际化大都市。",
    culture: "伦敦是一座多元文化的城市，拥有众多的博物馆、美术馆、剧院和音乐场馆。伦敦的文化活动丰富多彩，从古典音乐到现代艺术，从莎士比亚戏剧到街头表演应有尽有。",
    gallery: [
      "https://picsum.photos/id/1061/600/400",
      "https://picsum.photos/id/1062/600/400",
      "https://picsum.photos/id/1063/600/400",
      "https://picsum.photos/id/1064/600/400"
    ],
    landmarks: [
      {
        name: "大本钟和议会大厦",
        image: "https://picsum.photos/id/1061/400/300",
        description: "伦敦的标志性建筑，大本钟是英国议会大厦的钟楼，建于1858年。"
      },
      {
        name: "伦敦眼",
        image: "https://picsum.photos/id/1062/400/300",
        description: "高135米的巨型摩天轮，建于2000年，是伦敦最受欢迎的观光景点之一。"
      },
      {
        name: "白金汉宫",
        image: "https://picsum.photos/id/1063/400/300",
        description: "英国王室的官方住所，位于伦敦市中心，是英国君主制的象征。"
      }
    ]
  },
  {
    id: 6,
    name: "巴黎",
    country: "法国",
    region: "法兰西岛",
    population: "约214万",
    area: "105.4平方公里",
    climate: "温带海洋性气候",
    language: "法语",
    bannerUrl: "https://picsum.photos/id/1060/1920/500",
    description: "巴黎是法国的首都和最大城市，是法国的政治、经济、文化和教育中心。作为世界著名的旅游胜地，巴黎以其浪漫的氛围、丰富的文化遗产和艺术气息而闻名于世。",
    history: "巴黎的历史可以追溯到公元前3世纪，当时由凯尔特人建立。在中世纪成为法国的首都，经历了法国大革命等重要历史事件。19世纪的工业化和两次世界大战都对巴黎的发展产生了重要影响。",
    culture: "巴黎是世界文化艺术的重要中心，拥有卢浮宫、奥赛博物馆等世界级博物馆，以及众多的剧院、音乐厅和艺术画廊。巴黎的时尚产业也享誉全球，是世界时尚的领导者之一。",
    gallery: [
      "https://picsum.photos/id/1060/600/400",
      "https://picsum.photos/id/1065/600/400",
      "https://picsum.photos/id/1066/600/400",
      "https://picsum.photos/id/1067/600/400"
    ],
    landmarks: [
      {
        name: "埃菲尔铁塔",
        image: "https://picsum.photos/id/1060/400/300",
        description: "建于1889年，高324米，是巴黎最著名的地标和象征。"
      },
      {
        name: "卢浮宫",
        image: "https://picsum.photos/id/1065/400/300",
        description: "世界上最大、最著名的博物馆之一，收藏了蒙娜丽莎等众多艺术珍品。"
      },
      {
        name: "凯旋门",
        image: "https://picsum.photos/id/1066/400/300",
        description: "建于1806年，位于香榭丽舍大道尽头，是为纪念拿破仑军队的胜利而建。"
      }
    ]
  },
  {
    id: 7,
    name: "悉尼",
    country: "澳大利亚",
    region: "新南威尔士州",
    population: "约523万",
    area: "12,368.19平方公里",
    climate: "亚热带湿润气候",
    language: "英语",
    bannerUrl: "https://picsum.photos/id/1044/1920/500",
    description: "悉尼是澳大利亚最大的城市和重要的经济、金融和文化中心。以其壮观的自然景观、标志性建筑和宜人的气候而闻名，是世界上最宜居的城市之一。",
    history: "悉尼始建于1788年，是英国在澳大利亚建立的第一个殖民地。19世纪中叶的淘金热促进了悉尼的发展。20世纪以来，悉尼逐渐发展成为国际化大都市，2000年成功举办了夏季奥运会。",
    culture: "悉尼是一座多元文化的城市，拥有来自世界各地的移民。悉尼的文化生活丰富多彩，拥有众多的博物馆、美术馆、剧院和音乐节。悉尼的美食文化也十分发达，融合了世界各地的美食特色。",
    gallery: [
      "https://picsum.photos/id/1044/600/400",
      "https://picsum.photos/id/1045/600/400",
      "https://picsum.photos/id/1046/600/400",
      "https://picsum.photos/id/1047/600/400"
    ],
    landmarks: [
      {
        name: "悉尼歌剧院",
        image: "https://picsum.photos/id/1044/400/300",
        description: "悉尼的标志性建筑，建于1973年，以其独特的贝壳状屋顶设计而闻名于世，是世界文化遗产。"
      },
      {
        name: "悉尼 Harbour Bridge",
        image: "https://picsum.photos/id/1045/400/300",
        description: "建于1932年，连接悉尼市区和北悉尼，是悉尼的另一重要地标，被当地人称为'衣架'。"
      },
      {
        name: "邦迪海滩",
        image: "https://picsum.photos/id/1046/400/300",
        description: "悉尼最著名的海滩之一，以其金色沙滩和汹涌的海浪而闻名，是冲浪和休闲的胜地。"
      }
    ]
  }
]);

// 处理城市选择变化
const handleCityChange = () => {
  selectedCity.value = cities.value.find(city => city.id == selectedCityId.value) || null;
};

// 页面加载时检查是否有城市ID参数
onMounted(() => {
  if (route.query.id) {
    selectedCityId.value = route.query.id;
    handleCityChange();
  }
});
</script>

<style scoped>
/* 保持原有样式不变 */
.city-info-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.city-selector {
  margin-bottom: 2rem;
  text-align: center;
}

.city-selector label {
  font-size: 1.1rem;
  margin-right: 10px;
  color: #2c3e50;
}

.city-selector select {
  padding: 10px 15px;
  font-size: 1rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: white;
  min-width: 300px;
  cursor: pointer;
  transition: border-color 0.3s;
}

.city-selector select:focus {
  outline: none;
  border-color: #3498db;
}

.city-details {
  animation: fadeIn 0.5s ease;
}

.city-banner {
  position: relative;
  height: 300px;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 2rem;
}

.banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent 60%);
}

.banner-content {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 2rem;
  color: white;
}

.banner-content h1 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.banner-content p {
  font-size: 1.1rem;
  opacity: 0.9;
}

.city-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 3rem;
}

.stat-card {
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: transform 0.3s, box-shadow 0.3s;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.stat-card i {
  font-size: 2rem;
  color: #3498db;
  min-width: 40px;
  text-align: center;
}

.stat-info p {
  color: #7f8c8d;
  font-size: 0.9rem;
  margin-bottom: 0.2rem;
}

.stat-info h3 {
  font-size: 1.3rem;
  color: #2c3e50;
  margin: 0;
}

.city-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 3rem;
}

.city-description h2 {
  color: #2c3e50;
  margin-bottom: 1rem;
  font-size: 1.8rem;
}

.city-description h3 {
  color: #34495e;
  margin: 1.5rem 0 0.5rem;
  font-size: 1.4rem;
}

.city-description p {
  color: #555;
  line-height: 1.7;
  margin-bottom: 1rem;
}

.city-gallery h3 {
  color: #34495e;
  margin-bottom: 1rem;
  font-size: 1.4rem;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.gallery-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 4px;
  transition: transform 0.3s;
  cursor: pointer;
}

.gallery-img:hover {
  transform: scale(1.03);
}

.landmarks-section {
  margin-top: 3rem;
}

.landmarks-section h2 {
  color: #2c3e50;
  margin-bottom: 1.5rem;
  font-size: 1.8rem;
}

.landmarks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

.landmark-card {
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: transform 0.3s, box-shadow 0.3s;
}

.landmark-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.12);
}

.landmark-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.landmark-info {
  padding: 1.2rem;
}

.landmark-info h3 {
  color: #2c3e50;
  margin-bottom: 0.5rem;
  font-size: 1.3rem;
}

.landmark-info p {
  color: #555;
  line-height: 1.6;
  font-size: 0.95rem;
}

.no-selection {
  text-align: center;
  padding: 4rem 2rem;
}

.empty-state {
  max-width: 500px;
  margin: 0 auto;
  padding: 2rem;
  background-color: #f8f9fa;
  border-radius: 8px;
}

.empty-state i {
  color: #bdc3c7;
  margin-bottom: 1.5rem;
}

.empty-state h2 {
  color: #2c3e50;
  margin-bottom: 0.5rem;
}

.empty-state p {
  color: #7f8c8d;
  font-size: 1.05rem;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 768px) {
  .city-content {
    grid-template-columns: 1fr;
  }

  .banner-content h1 {
    font-size: 2rem;
  }

  .city-stats {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .city-stats {
    grid-template-columns: 1fr;
  }

  .gallery-grid {
    grid-template-columns: 1fr;
  }

  .city-selector select {
    min-width: auto;
    width: 100%;
  }
}
</style>
